<template>
  <div class="add-food">
	  <i class="fa fa-angle-left" @click="back"></i>
    <h1>添加食品</h1>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="foodName">食品名称:</label>
        <input type="text" id="foodName" v-model="food.foodName" required>
      </div>
      <div class="form-group">
        <label for="foodExplain">食品介绍:</label>
        <textarea id="foodExplain" v-model="food.foodExplain" required></textarea>
      </div>
      <div class="form-group">
        <label for="foodPrice">食品价格:</label>
        <input type="number" id="foodPrice" v-model="food.foodPrice" step="0.01" required>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'AddFood',
  data() {
    return {
      food: {
        foodName: '',
        foodExplain: '',
        foodPrice: null,
        businessId: this.$route.query.businessId  // 从路由参数中获取商家ID
      }
    };
  },
  created() {
  	this.business = this.$getSessionStorage('business');
  	this.businessId=this.business.businessId;
  },
  methods: {
	  back() {
	  	this.$router.go(-1);
	  },
    submitForm() {
      // 构建查询参数，省略了 foodId 字段
      const params = {
        businessId: this.businessId,
        foodName: this.food.foodName,
        foodExplain: this.food.foodExplain,
        foodPrice: this.food.foodPrice
      };
    
      let url=`/FoodController/save/${this.businessId}/${this.food.foodName}/${this.food.foodExplain}/${this.food.foodPrice}`;
	  this.$axios.post(url)
        .then(response => {
          if (response.data.result > 0) {
            this.$router.push({ name: 'FoodAdmin', query: { businessId: this.businessId } });
          } else {
            alert('添加食品失败');
          }
        })
        .catch(error => {
          console.error('添加食品错误:', error);
          alert('添加食品时发生错误');
        });
		
    }}
};
</script>

<style scoped>
.add-food {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input[type="text"],
textarea,
input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 15px;
  background-color: #01B0F2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0286c2;
}
</style>